import React from "react";
import { Layout, Breadcrumb, Row, Col ,Button,Icon} from "antd";
import PropTypes from "prop-types";
import { Route, Switch, withRouter } from "react-router";

import BrandPage from "./Brand/index.jsx";
import ProductionListPage from "./ProductionList/index.jsx";

import IconObj from "../../images/logoBoTao.png";
import "./index.scss";



function ClassItem({ id, name, handle_class_change, active }) {
  return (
    <Row
      key={id}
      className={active ? "class_item_active" : "class_item"}
      type="flex"
      justify="space-around"
      align="middle"
      onClick={() =>handle_class_change(id)}
    >
      <span>{name}</span>
    </Row>
  );
}

function ShouldNotReachableTip(tips) {
  return <Row className="class_dev_tips" type="flex" justify="center" align="middle"> {tips} </Row>
}

class ClassPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
   
      is_brands_loading: false,
      is_products_loading: false
    }
  }

  /**
   * 为了将获取异步状态的进度。
   * @param {string} cls_id 
   */
  wrapper_handle_class_change(cls_id) {
    const { handle_class_change, history } = this.props;
    this.setState({ is_brands_loading: true });
    history.push('/classes/brands');
    try {
      handle_class_change(cls_id).then((res) => {
        this.setState({ is_brands_loading: false })
      })
    } catch (err) {
      console.log("Get Brands From Cache.");
      this.setState({ is_brands_loading: false });
    }
  }

  /**
   * 为了将获取异步状态的进度。
   * @param {string} brand_id 
   */
  wrapper_handle_brand_change(brand_id) {
    const { handle_brand_change, history } = this.props;
    this.setState({ is_products_loading: true });
    history.push("/classes/productions_list");
    
    try {
      handle_brand_change(brand_id).then(res => {
        this.setState({ is_products_loading: false });
      })
    } catch (err) {
      console.log("Get Productions List From Cache.");
      this.setState({ is_products_loading: false });
    }
  }
  shoppingCart(e) {
    const {history} = this.props;
     history.push(`/shopping_cart`);
   }
  render() {

    const { icon_height, sider_width, breadcrumb_height, classes } = this.props;
    const { current_cls_id, current_brand_id } = this.props;
    const { is_brands_loading, is_products_loading } = this.state;
  
    const breadcrumb_items = [];

    if (current_cls_id !== undefined) {
      const class_obj = classes.find(cls => cls.id === current_cls_id);

      breadcrumb_items.push(class_obj.name);
      if (current_brand_id !== undefined) {
        breadcrumb_items.push(class_obj.brands.find(brd => brd.id === current_brand_id).name);
      }
    }

    const class_items = classes.map(cls => {
      return {
        id: cls.id,
        name: cls.name,
        handle_class_change: this.wrapper_handle_class_change.bind(this),
        active: current_cls_id === cls.id
      }
    })

    const brand_page_param = {
      current_brand_id, current_cls_id, classes, is_brands_loading, 
      handle_brand_change: this.wrapper_handle_brand_change.bind(this)
    };

    const prod_list_page_param = {
      current_brand_id, current_cls_id, classes, is_products_loading
    };

    return (
      <Layout className="class_container">
        <Layout.Sider className="class_sider" width={sider_width}>
          <Row className="class_sider_layout">
            <div style={{ height: icon_height,textAlign:'center'}} className="class_icon">
              <img src={IconObj} alt="" />
              {/* <h1 style={{color:'#fff',paddingTop: '5%'}}>波涛</h1> */}
            </div>
            <div style={{ marginTop: -icon_height, paddingTop: icon_height }} className="class_sider_content" >
              {class_items.map(cls => ClassItem(cls))}
            </div>
          </Row>

        </Layout.Sider>
        <Layout>
          <Layout.Header className="class_breadcrumb_wrapper" height={breadcrumb_height}>
            <Row className="class_breadcrumb_inner" type="flex" align="middle">
              <Col span={22}>
                <Breadcrumb >
                  {breadcrumb_items.map(item => <Breadcrumb.Item style={{color:'#fff'}} key={item}>{item}</Breadcrumb.Item>)}
                </Breadcrumb>
              </Col> 
                <Col span={2}>
                  <Button style={{backgroundColor:'#E9391D',width:'50px', height:'50px',marginTop:'13px'}} type="primary" shape="circle" onClick={(e) => this.shoppingCart(e)} >
                    <Icon type="shopping-cart" style={{ fontSize: '35px', textAlign:'center' }} />
                  </Button>    
                </Col>
            </Row>
            
          </Layout.Header>
       
       <Layout.Content className="class_content">
            <Switch>
              <Route path="/classes/brands" render={() => <BrandPage {...brand_page_param} />} />
              <Route path="/classes/productions_list" render={() => <ProductionListPage {...prod_list_page_param}/>} />
              <Route path="/classes" render={() => ShouldNotReachableTip("This Url should not be reachable!")} />
            </Switch>
          </Layout.Content>
         
   
        </Layout>
      </Layout>
    );
  }
}


ClassPage.propTypes = {
  current_cls_id: PropTypes.number,
  current_brand_id: PropTypes.number,
  classes: PropTypes.arrayOf(PropTypes.object).isRequired,    // Not structure meet.
  handle_class_change: PropTypes.func.isRequired,
  handle_brand_change: PropTypes.func.isRequired,

  sider_width: PropTypes.number,
  icon_height: PropTypes.number,
  breadcrumb_height: PropTypes.number,
}

ClassPage.defaultProps = {
  sider_width: 240,
  icon_height: 64,
  breadcrumb_height: 64,
}

export default withRouter(ClassPage);